<template>
  <el-dialog
    title="选择补考人员"
    :close-on-click-modal="false"
    :visible.sync="visible"
    lock-scroll
    width="70%"
    append-to-body
  >
    <el-row
      class="JADP-common-search-box"
      :gutter="16"
      v-if="papertype === '8167e907204d4f008fbf70805ebf902c'"
    >
      <el-form @submit.native.prevent>
        <el-col :span="24">
          <el-form-item label="考试标题">
            <el-select
              v-model="query.cpid"
              placeholder="请选择"
              style="width:240px"
              clearable
            >
              <el-option
                v-for="(item, index) in paperList"
                :key="index"
                :value="item.id"
                :label="item.examinationtitle"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="学生姓名">
            <el-input v-model="query.stuname" placeholder="请输入" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="及格分">
            <el-input v-model="query.jgscore" placeholder="请输入" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh-right" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-row>

    <el-table
      v-if="papertype === '8167e907204d4f008fbf70805ebf902c'"
      :data="list"
      height="500px"
      row-key="id"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" reserve-selection>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column label="班级" prop="clazzname"></el-table-column>
      <el-table-column prop="stuname" label="学生姓名" align="left" />
      <el-table-column prop="papername" label="试卷名称" align="left" />
      <el-table-column prop="totalScore" label="试卷总分" align="left" />
      <el-table-column prop="jgscore" label="及格分" align="left" />
      <el-table-column prop="stuscore" label="学生总分" align="left" />
    </el-table>

    <el-table
      v-else
      :data="list"
      height="500px"
      row-key="id"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" reserve-selection>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column label="班级" prop="clazzname"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="单位" prop="company"></el-table-column>
      <el-table-column label="班级设定学时" prop="hours"></el-table-column>
      <el-table-column label="考生已完成学时" prop="comhours"></el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.pageSize"
      @pagination="init"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="StartTestPaper">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "StartTestPaper",
  data() {
    return {
      visible: false,
      total: 0,
      query: {
        paperid: undefined,
        stuname: undefined,
        starttime: undefined,
        endtime: undefined,
        stuscore: undefined,
        answertime: undefined,
        jgscore: undefined,
        cpid: undefined
      },
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      },
      list: [],
      paperList: [], // 已完成试卷的列表
      multipleSelection: [],
      multipleSelection2: [],
      listLoading: true,
      clazzid: "",
      cpid: "",
      paperid: "",
      papertype: "" //试卷类型
    };
  },
  watch: {
    "query.cpid": {
      handler(val) {
        if (!val) return;
        this.initData();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init(clazzid, cpid, paperid) {
      this.visible = true;
      this.clazzid = clazzid;
      this.cpid = cpid;
      this.paperid = paperid;
      this.listLoading = true;
      // 补考
      if (this.papertype === "8167e907204d4f008fbf70805ebf902c") {
        //请求获取已考完的试卷列表
        request({
          url: `/api/clazzpaper/Xy_ks_clazz_paper/getKsCom/${clazzid}`,
          method: "get"
        }).then(res => {
          this.paperList = res.data;
        });
      } else {
        //正常考试&&模拟考试
        request({
          url: "/api/stuAnswer/Xy_ks_stu_answer/getKsList",
          method: "get",
          data: {
            clazzid,
            cpid,
            ...this.listQuery,
            organizeId:this.$store.getters.organizeId
          }
        }).then(res => {
          if (res.msg !== "Success") {
            this.$message({
              message: res.msg,
              type: "error",
              duration: 2000
            });
          } else {
            this.list = res.data.list;
            this.total = res.data.pagination.total;
          }
        });
      }
      this.listLoading = false;
    },

    initData() {
      this.listLoading = true;
      this.query.clazzid = this.clazzid;
      let _query = {
        ...this.listQuery,
        ...this.query,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/api/scoreManage/Xy_ks_students_score/getbklist`,
        method: "get",
        data: query
      }).then(res => {
        console.log(res, 123);
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },

    handleSelectionChange(val) {
      const res = val.map(item => item.stuid);
      this.multipleSelection = res;
      this.multipleSelection2 = val;
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    reset() {
      this.query.stuname = undefined;
      this.query.jgscore = undefined;
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    StartTestPaper() {
      let Arr = this.multipleSelection2.map(item => {
        return {
          clazzid: item.clazzid,
          clazzname: item.clazzname,
          comhours: item.comhours,
          company: item.company,
          cpid: item.cpid,
          creatortime: null,
          creatoruserid: item.creatoruserid,
          hours: item.hours,
          id: item.id,
          kstype: item.kstype,
          name: item.name,
          stuid: item.stuid
        };
      });
      if (!this.multipleSelection2.length)
        return this.$message.warning("请先选择考试人员");
      this.$confirm(
        "试卷一旦启动，便无法再次添加人员，请仔细确认考试人员是否正确；你确定要启动试卷吗？",
        "提示",
        {
          type: "warning"
        }
      )
        .then(() => {
          request({
            url:
              "/api/stuAnswer/Xy_ks_stu_answer/bk/" +
              this.multipleSelection.join(),
            method: "post",
            data: {
              clazzid: this.clazzid,
              cpid: this.cpid,
              paperid: this.paperid,
              organizeId:this.$store.getters.organizeId
              // list: Arr
            }
          }).then(res => {
            this.$message.success(res.msg);
            this.multipleSelection = [];
            this.multipleSelection2 = [];
            this.visible = false;
            this.$emit("refresh", true);
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped lang="scss">
>>> .el-dialog {
  margin-top: 10vh !important;
}
>>> .el-dialog__header {
  border-bottom: 1px solid #ccc;
}
>>> .el-dialog__body {
  padding: 10px;
}
</style>
